<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui">

<body>
	<h:form id="form">

    <p:growl id="msgs" showDetail="true" />

    <p:dataTable id="cars" var="car" value="#{tableBean.cars}">

        <p:column headerText="Model">
            <h:outputText value="#{car.model}" />
        </p:column>

        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Manufacturer">
            <h:outputText value="#{car.manufacturer}" />
        </p:column>

        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>

        <p:column style="width:100px">
             <h:panelGrid columns="3" styleClass="actions" cellpadding="2">
                 <p:commandButton update=":form:display" oncomplete="carDialog.show()" image="ui-icon ui-icon-search" title="View">
                     <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
                     <f:setPropertyActionListener value="#{false}" target="#{tableBean.editMode}" />
                 </p:commandButton>
                 <p:commandButton update=":form:display" oncomplete="carDialog.show()" image="ui-icon ui-icon-pencil" title="Edit">
                     <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
                     <f:setPropertyActionListener value="#{true}" target="#{tableBean.editMode}" />
                 </p:commandButton>
                 <p:commandButton update=":form:display" oncomplete="confirmation.show()" image="ui-icon ui-icon-close" title="Delete">
                     <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
                 </p:commandButton>
             </h:panelGrid>
        </p:column>

    </p:dataTable>

    <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" id="carDlg"
              width="300" showEffect="fade" hideEffect="explode" modal="true">

        <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">

            <f:facet name="header">
                <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
            </f:facet>

            <h:outputText value="Model:" />
            <h:panelGroup>
                <h:outputText value="#{tableBean.selectedCar.model}" style="font-weight:bold" rendered="#{!tableBean.editMode}"/>
                <p:inputText value="#{tableBean.selectedCar.model}" rendered="#{tableBean.editMode}" required="true" label="Model"/>
            </h:panelGroup>

            <h:outputText value="Year:" />
            <h:panelGroup>
                <h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold" rendered="#{!tableBean.editMode}"/>
                <p:inputText value="#{tableBean.selectedCar.year}" rendered="#{tableBean.editMode}" required="true" label="Year"/>
            </h:panelGroup>

            <h:outputText value="Manufacturer:" />
            <h:panelGroup>
                <h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold" rendered="#{!tableBean.editMode}"/>
                <h:selectOneMenu value="#{tableBean.selectedCar.manufacturer}" rendered="#{tableBean.editMode}">
                    <f:selectItems value="#{tableBean.manufacturers}" var="man" itemLabel="#{man}" itemValue="#{man}" />
                </h:selectOneMenu>
            </h:panelGroup>

            <h:outputText value="Color:" />
            <h:panelGroup>
                <h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold" rendered="#{!tableBean.editMode}"/>
                <h:selectOneMenu value="#{tableBean.selectedCar.color}" rendered="#{tableBean.editMode}">
                    <f:selectItems value="#{tableBean.colors}" var="color" itemLabel="#{color}" itemValue="#{color}" />
                </h:selectOneMenu>
            </h:panelGroup>

            <f:facet name="footer">
                <p:outputPanel rendered="#{tableBean.editMode}" layout="block" style="text-align:right">
                    <p:commandButton value="Save" update="cars msgs" actionListener="#{tableBean.save}" 
                                    oncomplete="onEditComplete(xhr,status,args)" image="ui-icon ui-icon-check"/>
                    <p:commandButton value="Cancel" onclick="carDialog.hide()" type="button" image="ui-icon ui-icon-close"/>

                </p:outputPanel>
            </f:facet>
        </h:panelGrid>

    </p:dialog>

    <p:confirmDialog message="Are you sure?" width="200"
                    showEffect="explode" hideEffect="explode"
                    header="Confirm" severity="alert" widgetVar="confirmation">

        <p:commandButton value="Yes sure" update="cars" actionListener="#{tableBean.delete}" oncomplete="confirmation.hide()"/>
        <p:commandButton value="Not yet" onclick="confirmation.hide()" type="button" />

    </p:confirmDialog>

    </h:form>
                    
</body>
</html>